<template>
  <div class="InfoList">
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item>
        <el-button type="primary" @click="addStudent">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="age" label="年龄" align="center" />
      <el-table-column prop="sex" label="性别" align="center" />
      <el-table-column prop="father" label="父亲姓名" align="center" />
      <el-table-column prop="mather" label="母亲姓名" align="center" />
      <el-table-column prop="time" label="入校时间" align="center" />
      <el-table-column prop="address" label="家庭住址" align="center" />
      <el-table-column prop="phone" label="联系方式" align="center" />
      <el-table-column label="操作" align="center" width="160">
        <template #default="scope">
          <el-button type="primary" @click="updateInfo(scope.row)" size="small"
            >Edit</el-button
          >
          <el-button type="danger" @click="del(scope.row)" size="small"
            >Del</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="state ? '添加学生信息' : '修改学生信息'"
       v-model="dialogFormVisible"
      width="500px"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" label-width="80px" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" label-width="80px" prop="age">
          <el-input v-model="form.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" label-width="80px" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="父亲姓名" label-width="80px" prop="father">
          <el-input v-model="form.father" autocomplete="off" />
        </el-form-item>
        <el-form-item label="母亲姓名" label-width="80px" prop="mather">
          <el-input v-model="form.mather" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入校时间" label-width="80px" prop="time">
          <el-date-picker
            v-model="form.time"
            type="date"
            format="yyyy年MM月dd日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="家庭住址" label-width="80px" prop="address">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系方式" label-width="80px" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure('form')">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { info, getInfo, infoDel } from "../../api/api";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        age: "",
        sex: "1",
        father: "",
        mather: "",
        time: "",
        address: "",
        phone: "",
      },
      rules: {
        name: [{ required: true, message: "请输入姓名" }],
        sex: [{ required: true }],
        age: [{ required: true, message: "请输入年龄" }],
        address: [{ required: true, message: "请输入地址" }],
        time: [{ required: true, message: "请选择入学时间" }],
        phone: [{ required: true, message: "请输入联系方式" }],
      },
      state: true,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getInfo().then((res) => {
        if (res.data.status === 200) {
          this.tableData = res.data.data;
        }
      });
    },
    //添加
    addStudent() {
      this.state = true;
      this.dialogFormVisible = true;
    },
    //修改
    updateInfo(row) {
      this.state = false;
      this.dialogFormVisible = true;
      this.form = { ...row };
    },
    //删除
    del(row) {
      console.log(row);
      this.$alert("你确定要删除该数据吗?", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          infoDel(row.id).then((res) => {
            if (res.data.status === 200) {
              this.$message.success(res.data.message);
              this.getData();
            }
          });
        },
      });
    },
    //确定
    sure(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.state) {
            info("post", this.form).then((res) => {
              if (res.data.status === 200) {
                this.getData();
                this.dialogFormVisible = false;
                this.$refs["form"].resetFields();
                this.$message.success(res.data.message);
              }
            });
          } else {
            info("put", this.form).then((res) => {
              if (res.data.status === 200) {
                this.getData();
                this.dialogFormVisible = false;
                this.$refs["form"].resetFields();
                this.$message.success(res.data.message);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.InfoList {
  .demo-form-inline {
    text-align: left;
  }
  .el-form-item {
    text-align: left;
  }
}
</style>